<template>
  <!-- 商品橱窗对话框 -->
  <div class="robot">
    <el-dialog
      title="编辑直播机器人"
      :visible.sync="isRobot"
      width="30%"
      :before-close="cancel">
      <el-form :model="form" :rules="ruleValidate" label-width="130px">
        <el-form-item label="机器人马甲" prop="name">
          我是机器人一号
        </el-form-item>
        <el-form-item label="评论间隔时间" prop="interval">
          <el-input v-model="interval" placeholder="请输入"></el-input> 秒
        </el-form-item>
        <el-form-item label="循环次数" prop="cycles">
          <el-input v-model="cycles" placeholder="请输入"></el-input> 次
        </el-form-item>
        <el-form-item label="评论内容" prop="commentsContent">
          <el-button @click="openChoose">请选择</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="success"  @click="submit">确认</el-button>
        <el-button @click="cancel">取消</el-button>
      </span>
    </el-dialog>
    <choose @close="closeChoose" :isChoose="isChoose"></choose>
  </div>
</template>

<script>
import Choose from "./choose";

export default {
  name:'robot',
  props: {
    isRobot:{
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data() {
    return {
      //表单校验规则
      ruleValidate: {
        interval: [{required: true, message: '不能为空', trigger: 'blur'}],
        cycles: [{required: true, message: '不能为空', trigger: 'blur'}],
        commentsContent: [{required: true, message: '不能为空', trigger: 'change'}],
      },
      form:{},
      interval:'',//评论间隔时间
      cycles:'',//循环次数
      isChoose: false,//是否进行选择
    }
  },
  components:{ Choose },
  methods: {
    //提交
    submit(){
      this.cancel()
    },
    //取消
    cancel(){
      this.$emit('close',false);
    },
    //选择
    openChoose(){
      this.isChoose = true
    },
    //关闭选择
    closeChoose(isChoose){
      this.isChoose = isChoose
    },
  }
}
</script>

<style lang="less" scoped>
</style>
